<template>
  <div class="userList">
    <el-form ref="searchForm" :inline="true" :model="searchForm">
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="searchForm.email" placeholder="邮箱" />
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="searchForm.name" placeholder="昵称" />
      </el-form-item>
      <el-form-item label="Id" prop="id">
        <el-input v-model="searchForm.id" placeholder="Id" />
      </el-form-item>
      <el-form-item>
        <el-button v-waves type="primary" @click="getList">
          查询
        </el-button>
        <el-button v-waves type="primary" @click="resetForm('searchForm')">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%; overflow-y: auto;"
      height="74vh"
    >
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="email" label="邮箱" width="200" />
      <el-table-column prop="time" label="注册时间" width="200" />
      <el-table-column prop="ban" label="是否封禁" width="100">
        <template slot-scope="scope">
          {{ scope.row.ban ? '已封禁' : '未封禁' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleUserClose(scope.row)"
          >
            {{ scope.row.ban ? '解除封禁' : '封禁' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="len"
      :limit.sync="limit"
      :page="page"
      @pagination="getList"
    />
  </div>
</template>

<script>
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import { getUser, postUserClose } from '@/api/user'
export default {
  name: 'ComplexTable',
  directives: { waves },
  components: { Pagination },
  data() {
    return {
      page: 1,
      limit: 10,
      len: 100,
      searchForm: { id: '', name: '', email: '' },
      tableData: []
    }
  },
  created() {
    this.getList({ page: this.page, limit: this.limit })
  },
  methods: {
    async getList({ page = this.page, limit = this.limit }) {
      const self = this
      const result = await getUser({
        page,
        limit,
        ...self.searchForm
      })
      if (result.code === 1) {
        this.tableData = result.data
        this.len = result.len
      }
    },
    async handleUserClose(row) {
      const op = row.ban ? -1 : 1
      const result = await postUserClose({
        id: row.id,
        op
      })
      if (result.code === 1) {
        row.ban = !row.ban
        this.$message({
          message: `${op === 1 ? '封禁' : '解除封禁'}用户${row.name}成功`,
          type: 'success'
        })
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.userList {
  padding: 20px;
}
.el-form {
  height: 50px;
}
/deep/ .el-table__body-wrapper {
  @include scrollBar();
}
</style>
